<template>
  <div class="food-content-box discount-box">
    <el-breadcrumb separator="/" class="page-title">
      <!--<el-breadcrumb-item :to="{ path: '@/devlopmentList' }">{{$t('m.DeveloperAdvertisement')}}</el-breadcrumb-item>-->
      <el-breadcrumb-item>Block booking</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="search-box container-padding">
      <el-form :inline="true" label-position="top" :model="submitForm" size="mini" ref="submitForm"  class="form-min-width">
        <div class="container-box label-style">
          <span class="label-title">{{$t('m.Restaurant')}}</span>
          <span class="label-title">{{this.id}}</span>
          <el-row :gutter="20">
            <el-col>
              <el-form-item label="Year">
                <el-date-picker
                  v-model="submitForm.year"
                  align="right"
                  type="year"
                  placeholder=""
                  style="width:200px;">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="Month">
                <el-select  style="width: 200px" v-model="submitForm.month" placeholder="">
                  <el-option v-for="rg in months" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col>
              <el-button type="primary" size="medium" @click="searchBlockBookingForm()">{{$t('m.Search')}}</el-button>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div class="bottom-line margin-line"></div>
      <el-form :inline="true" label-position="top" :model="blockForm"  ref="blockForm" :rules="blockRules" size="mini">
        <el-row :gutter="20">
          <el-col>
            <el-form-item label="" style="width: 200px;" prop="blockDatetime">
              <el-date-picker
                style="width:200px;"
                v-model="blockForm.blockDatetime"
                type="date"
                placeholder=""
                :disabled="isCanBlock">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="Reason" style="width: 300px;">
              <el-input
                type="textarea"
                :rows="4"
                placeholder=""
                v-model="blockForm.reason"
                :disabled="isCanBlock">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-button type="warning" size="medium" @click="addBlockBookingUpload()" :disabled="isCanBlock">Block</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!--表格-->
      <el-table
        :data="tableData"
        v-loading="tableLoading"
        border
        style="width: 100%;margin-top:20px;">
        <!--Delete-->
        <el-table-column
          prop="Delete"
          label="Delete"
          align="center"
          min-width="100">
          <template slot-scope="scope">
            <el-button @click="Delete(scope.row.blockId, scope.row.status)" type="text"  v-if="scope.row.status">Delete</el-button>
            <div class="list-notes" v-else>Delete</div>
          </template>
        </el-table-column>
        <!--Status-->
        <el-table-column
          prop="Status"
          label="Status"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <!--<div class="list-notes">{{getStatusItem(scope.row.status)}}</div>-->
            <div class="list-notes" v-if="scope.row.status">Active</div>
            <div class="list-notes" v-else>Delete</div>
          </template>
        </el-table-column>
        <!--Date-->
        <el-table-column
          prop="Date"
          label="Date"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <div class="list-notes">{{getBlockDate(scope.row.blockDatetime)}}</div>
          </template>
        </el-table-column>
        <!--Day-->
        <el-table-column
          prop="Day"
          label="Day"
          align="center"
          min-width="150">
          <template slot-scope="scope">
            <div class="list-notes">{{getDayTime(scope.row.blockDatetime)}}</div>
          </template>
        </el-table-column>
        <!--Reason-->
        <el-table-column
          prop="Reason"
          label="Reason"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <div class="list-notes">{{scope.row.reason}}</div>
          </template>
        </el-table-column>
        <!--Created Date-->
        <el-table-column
          prop="CreatedDate"
          label="Created Date"
          align="center"
          min-width="160">
          <template slot-scope="scope">
            <div class="list-notes">{{getDate(scope.row.createDatetime)}}</div>
          </template>
        </el-table-column>
        <!--Created By-->
        <el-table-column
          prop="CreatedBy"
          label="Created By"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <div class="list-notes">{{scope.row.createBy}}</div>
          </template>
        </el-table-column>
        <!--Updated Date-->
        <el-table-column
          prop="UpdatedDate"
          label="Updated Date"
          align="center"
          min-width="160">
          <template slot-scope="scope">
            <div class="list-notes">{{getDate(scope.row.updateDatetime)}}</div>
          </template>
        </el-table-column>
        <!--Updated By-->
        <el-table-column
          prop="UpdatedBy"
          label="Updated By"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <div class="list-notes">{{scope.row.updateBy}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import { searchBlockBooking, uploadBlockBookingForm, changeBlockStatus } from '../../api/mgc_api'
  import Qs from 'qs'
  export default {
    name: 'blockBooking',
    data() {
      return {
        id: null,
        months:  [
          {"value": '01', "text": "1"},
          {"value": '02', "text": "2"},
          {"value": '03', "text": "3"},
          {"value": '04', "text": "4"},
          {"value": '05', "text": "5"},
          {"value": '06', "text": "6"},
          {"value": '07', "text": "7"},
          {"value": '08', "text": "8"},
          {"value": '09', "text": "9"},
          {"value": '10', "text": "10"},
          {"value": '11', "text": "11"},
          {"value": '12', "text": "12"},
        ],
        submitForm: {
          // 表单数据必填字段
          year: null,
          month: '01',
        },
        blockForm: {
          blockDatetime:null,
          reason:null,
        },
        isCanBlock: false,
        fullscreenLoading: false,
        tableData: [],
        pageData: {
          pageNum: 1,
          pageSize: 20,
        },
        pageInfo: {
          totalCount: 0,
          totalPages: 0
        },
        tableLoading: false,
        blockRules: {

        },
      }
    },
    methods: {
      // message alert 用于前端错误提示信息
      messageToastErr (msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 1500,
          type: 'error'
        })
      },
      dateFormat(value) {
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var H = date.getHours()
        var i = date.getMinutes()
        var s = date.getSeconds()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        if (H < 10) {
          H = '0' + H
        }
        if (i < 10) {
          i = '0' + i
        }
        if (s < 10) {
          s = '0' + s
        }
        var t = Y + '-' + m + '-' + d
        return t
      },
      getDate (value) {
        if(!value){
          return ''
        }
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var H = date.getHours()
        var i = date.getMinutes()
        var s = date.getSeconds()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        if (H < 10) {
          H = '0' + H
        }
        if (i < 10) {
          i = '0' + i
        }
        if (s < 10) {
          s = '0' + s
        }
        var ts = Y + '-' + m + '-' + d + '  ' + H + ':' + i + ':' + s
        return ts
      },
      getBlockDate (value) {
        if(!value){
          return ''
        }
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        var ts = d + '-' + m + '-' + Y
        return ts
      },
      getDayTime(value) {
        if(!value){
          return ''
        }
        let date = new Date(value)
        let weekday = date.getDay()
        let day = ''
        if (weekday == 0) {
          day = 'Sunday'
        } else if (weekday == 1) {
          day = 'Monday'
        } else if (weekday == 2) {
          day = 'Tuesday'
        } else if (weekday == 3) {
          day = 'Wednesday'
        } else if (weekday == 4) {
          day = 'Thursday'
        } else if (weekday == 5) {
          day = 'Friday'
        } else if (weekday == 6) {
          day = 'Saturday'
        }
        return day
      },
      searchBlockBookingForm() {
        this.tableLoading = true
        let dateTime = null
        if (this.submitForm.year) {
          let date = new Date(this.submitForm.year)
              dateTime = date.getFullYear()
          if (this.submitForm.month) {
            dateTime = dateTime + "-" + this.submitForm.month
          }
        }


        console.log(dateTime)
        let params = {
          restaurantId: this.id,
          datetime: dateTime
        }
        params = Qs.stringify(params)
        searchBlockBooking(params)
          .then((res) => {
            if (res) {
              if (res.data.errorID == 0) {
                console.log(res)
                this.tableData = res.data.object
                // 分页信息配置
                // this.pageInfo.totalPages = data.data.pages
                // this.pageInfo.totalCount = data.data.total
                // 清除loading 状态
                setTimeout(() => {
                  this.tableLoading = false
                }, 400)
              } else {
                this.messageToastErr(res.data.message)
              }
            }
          })
          .catch((error) => {
            // this.showToast(error.errorID)
            // console.log(error)
            this.messageToastErr('error,please refresh the page later')
            setTimeout(() => {
              this.tableLoading = false
            }, 400)
          })
      },
      addBlockBookingUpload() {
        //新增 -- 表单信息
        let formAjaxData = {
          restaurantId: this.id,
          blockDatetime: this.blockForm.blockDatetime ? this.dateFormat(this.blockForm.blockDatetime) : '',
          reason: this.blockForm.reason,
        }
        let params = Qs.stringify(formAjaxData)
        let config = {
          'Content-Type': 'multipart/form-data'
        }
        this.fullscreenLoading = true
        uploadBlockBookingForm(params, config)
          .then((res) => {
            console.log(res)
            if (res) {
              if (res.data.errorID == 0) {
                this.searchBlockBookingForm()
              } else {
                this.messageToastErr(res.data.message)
              }
            }
            this.fullscreenLoading = false
          })
          .catch((error) => {
            console.log(error)
            this.fullscreenLoading = false
            this.messageToastErr('error,please try again leter')
          })
      },
      Delete(id, status) {
        this.$prompt('This data will be change status.  Please type "1" to confirm.', 'Delete confirm！', {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          inputPattern: /1/,
          inputErrorMessage: 'Enter error',
          inputValidator: (value) => {
            // 继续校验
            if (!(value == 1 && value.length == 1)) {
              return false
            }
          }
        })
          .then(() => {
            let sendData = {
              status: !status,
              blockId: id,
            }
            let params = Qs.stringify(sendData)
            let config = {
              'Content-Type': 'multipart/form-data'
            }
            this.fullscreenLoading = false
            changeBlockStatus(params, config)
              .then((res) => {
                console.log(res)
                if (res) {
                  if (res.data.errorID == 0) {
                    this.searchBlockBookingForm()
                  } else {
                    this.messageToastErr(res.data.message)
                  }
                }
                this.fullscreenLoading = false
              })
              .catch((error) => {
                this.messageToastErr(error.errorID)
                this.fullscreenLoading = false
              })
          })
          .catch(() => {
          })
      },
    },
    mounted () {
      this.id = this.$route.query.id || ''
      //没有餐馆id时不可新增block booking
      if (!this.id) {
        this.isCanBlock = true
      }
      this.searchBlockBookingForm()
    }
  }
</script>
<style>
  .discount-box .el-table td {
    padding:0!important;
  }
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }
  .food-content-box .container-padding {
    padding: 20px 40px 0 40px;
  }
  .label-title {
    display: block;
    line-height:28px;
    padding:0 0 10px 0;
    font-size: 14px;
    color: #606266;
  }
  .bottom-line{
    border-bottom: 1px solid #e6e6e6;
  }
  .margin-line{
    margin:10px 0;
  }
  .list-notes{
    text-align: center;
    display: block;
  }
</style>
